<template>

    <div style="height: 600px;">
        <!--     搜索框       -->
        <el-card :inline="true" style="margin: 20px auto;height: 80px;width: 1288px;background-color: rgba(250,235,215,0.16)">
            <el-form :inline="true">
                <el-form-item label="用餐状态" style="width:180px">
                    <el-select v-model="search_tables_form.repastStatus" placeholder="用餐状态" @change="load_tables">
                        <el-option label="就餐中" value="0"></el-option>
                        <el-option label="空闲" value="1"></el-option>
                        <el-option label="已预约" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="可坐人数" style="width:180px">
                    <el-select v-model="search_tables_form.number" placeholder="人数" @change="load_tables">
                        <el-option v-for="item in 20" :value="item">{{item}}<span>人桌</span></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="餐桌名" style="width:200px">
                    <el-input v-model="search_tables_form.name" placeholder="请输入餐桌名" @keydown.enter="load_tables"></el-input>
                </el-form-item>

                <el-form-item  style="width:280px">
                    <el-button style="margin-left: 30px" @click="reset_search">重置</el-button>
                    <el-button @click="load_tables" type="primary">查询</el-button>
                </el-form-item>

                <el-form-item>
                        <el-button style="background-color: #B3E09CFF;border-radius: 0;border: none">用餐中</el-button>
                    <el-button style="background-color: #D8EBFFFF;margin-left: 0;border-radius: 0;border: none">已预约</el-button>
                        <el-button style="background-color: #F5F5F5FF;margin-left: 0;border-radius: 0;border: none">空闲</el-button>

                </el-form-item>
            </el-form>

        </el-card>
        <!--   展示信息     -->
        <el-card style="margin: 20px auto;height: calc(100% - 80px);width: 1288px;overflow-y: auto;background-color: rgba(250,235,215,0.16)">
            <el-row :gutter="10">
                <el-col :span="3" v-for="item in tables_arr" style="margin:10px 0">
                    <el-card :style="{'background-color':item.repastStatus==='0'?'#B3E09CFF':item.repastStatus==='1'?'#f5f5f5':'#D8EBFFFF'}">
                        <span style="font-size: 16px;color: #333;font-family: 幼圆">{{item.name}}</span>
                        <span style="font-size: 15px;font-weight:bolder;color: #666;font-family: 幼圆;margin-left: 30px;">{{item.number}}人</span>
                    </el-card>
                </el-col>
            </el-row>

        </el-card>
    </div>

</template>

<script setup>
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";
import qs from "qs";

//管理员所属的分店id

onMounted(()=>{
    search_tables_form.value.branchId = getUser().branchId
    console.log(search_tables_form.value)
    load_tables()
})
//餐桌搜索
const search_tables_form = ref({
    name:'',number:'',status:'0',repastStatus:'',branchId:''
})
//重置搜索表单
const reset_search = ()=>{
    search_tables_form.value.name=''
    search_tables_form.value.number=''
    search_tables_form.value.repastStatus=''
    load_tables()
}
//餐桌数组
const tables_arr = ref([])
const load_tables = ()=>{
    let data = qs.stringify(search_tables_form.value)
    axios.get(BASE_URL+'/v1/tables/select?'+data)
        .then((response)=>{
            if(response.data.code===2000){
                tables_arr.value=response.data.data
                console.log(tables_arr.value)
            }else{
                ElMessage.error(response.data.msg)
            }
        })
}



</script>

<style scoped>



</style>